<template>
  <div>
    <ul>
      <!-- 
        v-for指令加给那个需要重复的标签
        item 表示数组项
        index 表示索引
        key 属性必须要写，而且必须是唯一的不重复的
      -->
      <li v-for="(item, index) in studentArr" :key="item.id">
        索引：{{ index }}，{{ item.username }}
        <span>{{ getLevel(item.score) }}</span>
      </li>
    </ul>
    <button @click="add">添加学员</button>
    <button @click="change">更新数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      studentArr: [
        { username: "jack1", score: 80, id: 1 },
        { username: "jack2", score: 30, id: 2 },
        { username: "jack3", score: 90, id: 3 },
        { username: "jack4", score: 60, id: 4 },
        { username: "jack5", score: 70, id: 5 },
      ],
    };
  },
  methods: {
    add() {
      this.studentArr.push({ username: "rose", score: 90, id: 6 });
    },
    change() {
      // 注意：通过length属性操作数组不会触发视图更新
      // this.studentArr.length = 0;
      // 通过数组下标操作数组也不会触发视图更新
      // this.studentArr[0] = {username: 'aaa', score:60, id: 1}
      // filter concat


      // 解决办法1： 使用响应式的方法去操作数据 (注意下面这些方法不是原生的数组方法，Vue对这些方法内部进行了改造)
      // push()
      // pop()
      // shift()
      // unshift()
      // splice()
      // sort()
      // reverse()

      // 解决办法2： 通过Vue.set()方法来修改数组
      // Vue.set(this.studentArr, 0, {username: 'aaa', score:60, id: 1})
      this.$set(this.studentArr, 0, {username: 'aaa', score:60, id: 1})
    },
    getLevel(score) {
      if (score >= 90) {
        return "优";
      } else if (score >= 80) {
        return "良";
      } else if (score >= 70) {
        return "中";
      } else {
        return "差";
      }
    },
  },
};
</script>
<style>
</style>